.sidebar {
  overflow-x: visible;
  position: relative;
  display: flex;
  height: 100%;
  align-items: stretch;
}

.resizer {
  cursor: ew-resize;
  position: absolute;
  top: 0;
  height: 100%;
  width: 5px;
  z-index: 100;

  &:hover, &:active {
    background-color: light-dark(
      theme('colors.blue.6'),
      theme('colors.blue.8')
    );
  }
}

.content {
  container-name: sidebar;
  container-type: inline-size;
  flex: 1;
  border-color: light-dark(
    theme('colors.gray.4'),
    theme('colors.dark.5')
  ) !important;
}

.left {
  .resizer {
    left: -2px;
  }
  .content {
    border-left: 1px solid;
  }
}

.right {
  .resizer {
    right: -2px;
  }
  .content {
    border-right: 1px solid;
  }
}
